@import '../../style/themes';
@import '../../style/mixins';

.x-rate {
  @include reset-component();

  display: inline-flex;
  font-size: 24px;
  user-select: none;

  &_star {
    position: relative;
    cursor: pointer;
    color: $rate-color;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
    transition: transform .2s;
    &:hover {
      transform: scale(1.2);
    }
    &-active {
      color: $primary-color;
    }

    &-half &_1 {
      color: $primary-color;
    }

    &_1 {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      overflow: hidden;
      transition: color .3s;
      pointer-events: none;
    }
    &_2 {
      transition: color .3s;
      pointer-events: none;
    }
  }
  &_star + &_star {
    margin-left: $padding-xs;
  }

  .x-icon {
    vertical-align: top;
  }
}